<template>
    <div class="shopliving">
        <div class="list">
            <div class="list_item" v-for="(item, index) in list.data" :key="index" @click="toLivingDetail(item.buildingsite_id)">
                <div class="list_head">
                    <img :src="item.user_picture" alt>
                </div>
                <div class="list_info">
                    <div class="list_name">
                        <p class="role_name">{{item.role_name}}</p>
                        <p class="ellipsis_line_com">{{item.user_name}}</p>
                    </div>
                    <p class="list_content">{{item.log_record}}</p>
                    <img :src="item.process_image" alt class="list_img">
                    <div class="list_bottom">
                        <p class="list_address">{{item.community_name}}</p>
                        <!-- <navigator class="list_link" :url="`/pages/pagesHome/shop/shopLivingDetail?build_id=${item.buildingsite_id}`" open-type="navigate">装修详情</navigator> -->
                        <div class="list_link">装修详情</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getDecorationLiveList } from '@/api/shop'
import { list } from '@/mixins'
export default {
	name: 'ShopLiving',
	mixins: [list],
	data() {
		return {
		}
	},
	onLoad() {
		this.getList()
		if (this.$util.shieldReview()) {
			uni.setNavigationBarTitle({
      			title: '装修直播'
			})
		}
	},
	onPullDownRefresh() {
		this.resetList()
		this.getList().then(() => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.finished) {
			uni.showToast({
				title: '没有更多了',
				icon: 'none'
			})
			return
		}
		if (this.list.loading) {
			return
		}
		this.getList()
	},
	methods: {
		toLivingDetail(id) {
			uni.navigateTo({
				url: `/pages/pagesHome/shop/shopLivingDetail?build_id=${id}`
			})
		},
		getList() {
			const params = {
				page: this.list.page,
				limit: this.list.limit
			}
			return getDecorationLiveList(params).then(res => {
				 this.completes(res)
			})
		}
	}
}
</script>

<style scope lang="scss">
.shopliving {
    background-color: #f5f5f5;
}

.shopliving header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    width: 100%;
    height: 88px;
    background-color: #fff;
    box-sizing: border-box;
}

.shopliving .header_back {
    display: inline-block;
    width: 20px;
    height: 34px;
    background: url($imgUrl+'center/back.png') center center / 100% 100% no-repeat;
}

.shopliving .header_caption {
    font-size: 36px;
    color: #030303;
}

.shopliving .header_space {
    display: inline-block;
    width: 20px;
    height: 34px;
}

.shopliving .list {
    margin-top: 20px;
}

.shopliving .list_item {
    margin-bottom: 20px;
    padding: 30px;
    background-color: #fff;
    box-sizing: border-box;
}

.shopliving .list_head {
    display: inline-block;
    margin-right: 20px;
    width: 70px;
    height: 70px;
    vertical-align: top;
    border-radius: 50%;
    overflow: hidden;
}

.shopliving .list_head img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopliving .list_info {
    display: inline-block;
    width: 590px;
    vertical-align: top;
}

.shopliving .list_name {
    display: flex;
    font-size: 34px;
    color: #333;
    font-weight: bold;
}

.shopliving .list_name .role_name {
    flex: 0 0 auto;
}

.shopliving .list_name .ellipsis_line_com {
   padding-left: 20px;
   flex: 0 0 80%;
}

.shopliving .list_content {
    margin-top: 20px;
    font-size: 30px;
    color: #333;
    line-height: 45px;
}

.shopliving .list_img {
    margin-top: 30px;
    max-width: 100%;
}

.shopliving .list_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    height: 50px;
}

.shopliving .list_address {
    font-size: 24px;
    color: #999;
}

.shopliving .list_link {
    display: inline-block;
    padding-left: 40px;
    width: 182px;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    color: #666;
    background: url($imgUrl+'shop/shopliving_link_bg.png') center center / 100% 100% no-repeat;
    box-sizing: border-box;
}
</style>
